<template>
  <div class="shopcarContainer">
	    
	    <div class="goods-list">
				 <div class="mui-card" v-for="(item,i) in goodsList" :key="item.id">	
					<!--内容区-->
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<mt-switch v-model="$store.getters.getGoodsSelect[item.id]" @change="updateGoodsSelect(item.id,$store.getters.getGoodsSelect[item.id])"></mt-switch>
							<img :src="item.img_url"/>
							<div class="info">
								<h1>{{item.title}}</h1>
								<p>
								<span class="price">￥{{item.sell_price}}</span>
									<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
									<a class="my-a" @click.prevent="remove(item.id,i)">删除</a>
								</p>
								
							</div>
						</div>
					</div>
			  </div>
			 </div>
		<!--
        	作者：offline
        	时间：2019-01-25
        	描述：结算区域
        -->
				<div class="mui-card">	
					<!--内容区-->
					<div class="mui-card-content">
						<div class="mui-card-content-inner jiesuan">
							<div class="left">
								<p>总计不含运费</p>
								<p>已购商品<span class="red">{{$store.getters.getGoodsValue.count}}</span>件, 总计<span class="red">￥{{$store.getters.getGoodsValue.amount}}</span></p>
							</div>
							 <mt-button type="danger"  @click="">去结算</mt-button>
							 <p></p>
						</div>
					</div>
			 </div>
			 
  </div>
</template>

<script>
	import numbox from "../subcomponents/shopcar_numbox.vue";
	
	export default {
		data(){
			return {
				goodsList: []
			}
		},
		created(){
			this.getGoodsList();
		},
	  methods: {
			 getSelectedCount(count) {
      // 当子组件把 选中的数量传递给父组件的时候，把选中的值保存到 data 上
      this.selectedCount = count;
      console.log("父组件拿到的数量值为： " + this.selectedCount);
     }
  	  ,getGoodsList(){
				var idAdrr = [];
				if(this.$store.state.car != undefined && this.$store.state.car != null ){
						this.$store.state.car.forEach(item=> idAdrr.push(item.id));
						if(idAdrr.length<= 0){
							return;
						}	
						this.$http.get("../dist/goods/goods.json").then(result => {
			        if (result.body.status == 0) {
			        	idAdrr.forEach(item=> {
										this.goodsList.push(result.body.message[item-1]);
							 })			          
							
			        }
			      })
		
				}
							
			}
  		,remove(id,index){
				this.goodsList.splice(index,1)
				this.$store.commit("removeGoodsCar",id);
			}
  		,updateGoodsSelect(id,val){
				this.$store.commit("updateGoodsSelect",{
        id: id,
        selected:val
      });
		  }
		},
		components: {
    	numbox
   }

	};
</script>

<style lang="scss" scoped>

.shopcarContainer{
	background-color: #eee;
	overflow: hidden;
  .goods-list { 
 		.mui-card-content-inner {
			display: flex;
			align-items: center;
			
		}
		img {
			width: 60px;
			height: 60px;
		}
		h1{
			font-size: 13px;
		}
	 .info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			 .price {
					font-weight: bold;
					color: red;
			 }	
	  }
	
	}
	.jiesuan {
			display: flex;
			overflow: hidden;
			justify-content: space-between;
			align-items: center;
			.red {
					color: red;
					font-weight: bold;
			}
		}
}
</style>
